<template>
	<view>
		<!-- 空白页 -->
		<Blank v-if="loalist.length == 0" isedit="暂无关注的人哦~~"></Blank>
		<!-- 列表 -->
		<view class="acty-active" v-else v-for="(item,index) in loalist" :key="loalist">
			<image class="caty-image" :src="item.avatar" mode=""></image>
			<view v-if="this.info == 'attention'">
			<van-button class="caty-button" v-if="item.datainfo == true" round @click="xcancel(index)">已关注</van-button>
			<van-button class="caty-but" v-else round @click="xjudge(index)">关注</van-button>
				</view>
				<view v-else>
				<van-button class="caty-button" v-if="item.follows == true" round @click="xcancel(index)">互相关注</van-button>
				<van-button class="caty-but" v-else round @click="xjudge(index)">回关</van-button>
				</view>
			<text class="caty-actest">{{item.name}}</text>
			<span class="caty-spon">粉丝：{{item.fansNumber}}</span>
		</view> 
	</view>
</template>

<script>
	import roles from '@/http/roles.js'
	import Api from '@/http/api.js' 
	import Blank from '@/package/components/blank.vue'
	export default{ 
		components:{Blank},
		data(){
			return{
				loalist:[],
				q:{
					index:1,  
					size:50,
				},
				info:''
			}
		},
		onLoad(option) { 
			this.info = option.type
			let title = '粉丝列表';
			if(option.type==='attention'){
				title = '关注列表'
			}
			uni.setNavigationBarTitle({
				title
			})
			this.logcater()
		},
		methods:{
			async logcater(){
				if(this.info == 'attention'){
				const res = await roles.concern(this.q) 
				let cartList = res.data.data.map(item=>{
					item.datainfo = true; 
					return item;
				});
				this.loalist = cartList
					} else if(this.info == 'bean'){
				const resd = await roles.beantr(this.q)
				this.loalist = resd.data.data
				console.log(this.loalist)
				}
			},
			// 关注判断
			async xcancel(index){
				const redge = await Api.unfollow({userId:this.loalist[index].userId})
				
				const rec = await Api.attention({userId:this.loalist[index].userId})
				if(this.info == 'attention'){
				this.loalist[index].datainfo = rec.data
			    } else{
					this.logcater()
				}
			 },
			 async xjudge(index){
				 const res = await Api.concern({userId:this.loalist[index].userId})
				 
				 const rec = await Api.attention({userId:this.loalist[index].userId})
				 if(this.info == 'attention'){
				 this.loalist[index].datainfo = rec.data
				 } else{
					this.logcater()
				 }
			 
			 }
		}
	}
</script>

<style lang="scss">
	 // 列表
	.acty-active{
		margin-top: 30rpx;
		padding-left: 20rpx;
		border-bottom: 1px solid #f7f7f7;
		margin-bottom: 30rpx;
		.caty-image{
			border-radius: 50%;
			width: 90rpx;
			height: 90rpx;
			float: left;  
			margin-right: 23rpx;
		}
		.caty-actest{  
			font-size: 32rpx;
			color: #1d1d1d;
			font-weight: bold;
		}
		.caty-spon{
			display: block;
			font-size: 26rpx;
			color: #A4A4A4;
			font-weight: 500;
			margin-top: 5rpx;
		}
	}
	 .caty-button{
		 float: right;
		 margin-right: 30rpx;
		 font-size: 24rpx;
		 .van-button{
			 height: 56rpx;
			 background-color: #f9f9f9;
			 border: 1px solid #eeeeee;
			 color: #818080;
		 }
	 }
	 .caty-but{
		 float: right;
		 margin-right: 30rpx;
		 font-size: 24rpx;
		 .van-button{
		 			 height: 56rpx;
		 			 background-color: #ff7144;
		 			 border: 1px solid #ff7144;
		 			 color: #fff;
		 }
	 }
</style>  